<template>
  <div class="home">
    <!-- 上方导航栏 -->
    <el-header style="background-color: #409EFF; padding: 0; height: 60px;">
      <el-row type="flex" justify="space-between" align="middle" style="height: 100%;">
        <!-- 左侧：商城名称 -->
         <el-col :span="8" style="color: white; font-size: 18px; font-weight: bold; text-align: left; padding-left: 20px;">
          优购二手商城
        </el-col>
        <!-- 右侧：用户头像和登出按钮 -->
        <el-col :span="6" style="text-align: right; padding-right: 20px;">
          <el-avatar
            v-if="isLoggedIn && user && user.userPic"
            size="medium"
            :src="`http://192.168.239.53:8082/${user.userPic}`"
            style="margin-right: 10px;"
          />
          <el-avatar
            v-else
            size="medium"
            :src="'https://example.com/path/to/default-avatar.jpg'"
            style="margin-right: 10px;"
          />
          <el-button type="primary" size="small" @click="logout">登出</el-button>
        </el-col>
      </el-row>
    </el-header>

    <!-- 左侧导航栏 -->
    <el-container>
      <el-aside width="200px" style="background-color: #f4f4f4; padding-top: 20px; height: 100vh; box-sizing: border-box;">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#f4f4f4"
          text-color="#333"
          active-text-color="#409EFF"
          style="height: 100%; border-right: none;"
        >
          <el-menu-item index="1" @click="goToHome">首页</el-menu-item>
          <el-menu-item index="2" @click="goToCategory">分类</el-menu-item>
          <el-menu-item index="3" @click="goToGoodsList">商品列表</el-menu-item>
          <el-menu-item index="4" @click="goToUserCenter">个人中心</el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主体内容区：嵌套路由展示 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { fetchUser } from '@/api/user';

export default {
  name: "Home",
  data() {
    return {
      user: null, // 用户信息
      isLoggedIn: false, // 用户登录状态
    };
  },
  async created() {
    const token = sessionStorage.getItem('token'); // 获取 token 判断是否已登录
    if (token) {
      try {
        const userInfo = await fetchUser(); // 获取用户信息
        this.user = userInfo; // 将 API 返回的数据赋值给 user
        this.isLoggedIn = true; // 设置用户已登录
      } catch (error) {
        console.error("Failed to fetch user info:", error);
      }
    }
  },
  methods: {
    logout() {
      // 清除用户登录状态
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("user");
      this.isLoggedIn = false;
      this.$router.push("/login"); // 登出后跳转到登录页面
    },
    goToHome() {
      this.$router.push("/");
    },
    goToCategory() {
      this.$router.push("/categorymenu");
    },
    goToGoodsList() {
      this.$router.push("/goods");
    },
    goToUserCenter() {
      this.$router.push("/userprofile");
    },
  },
};
</script>

<style scoped>
/* 顶部导航栏样式 */
.el-header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 左侧导航栏样式 */
.el-aside {
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  padding-bottom: 20px; /* 给底部添加一些间距 */
}

/* 左侧菜单项的 hover 和 active 样式 */
.el-menu .el-menu-item:hover {
  background-color: #e8f5ff; /* 修改菜单项的 hover 背景色 */
}

.el-menu .el-menu-item.is-active {
  background-color: #d3e9ff; /* 修改菜单项的激活背景色 */
}


</style>